import './StudentCoursePage.scss';
import { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import { Outlet } from 'react-router-dom';
import { DoubleLeftOutlined } from '@ant-design/icons';
import { useSelector,useDispatch } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';

const menuList = [
    {
        label: '课程视频',
        path: '/studentcourse'
    },
    {
        label: '测验与作业',
        path: '/studentcourse/test'
    },
    {
        label: '学习情况',
        path: '/studentcourse/conditon'
    },
]


const items = [
    {
        label: (<span>课程视频</span>),
        key: '1',
    },
    {
        label: <span>测验与作业</span>,
        key: '2',
    },
    {
        label: <span>学习情况</span>,
        key: '3',
    },
];

function StudentCoursePage() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { user_status } = useSelector(state => state.user);

    function handleMenuClick(e) {
        dispatch(setUserStatus({
            ...user_status,
            menu_content:menuList[e.key - 1].label
        }))
        navigate(menuList[e.key - 1].path);
    }

    function handleBackClick() {
        navigate('/student');
    }

    return (
        <div className='StudentCoursePage'>
            <nav>
                <button onClick={handleBackClick}> <DoubleLeftOutlined /> 返回</button>
                <header>
                    <h1>{user_status.class_name}</h1>
                    <h4>{user_status.teacher_name}</h4>
                </header>
                <Dropdown
                    className='dropDownMenu'

                    menu={{
                        items,
                        onClick: handleMenuClick
                    }}
                >
                    <Space
                        style={{
                            cursor: 'pointer',
                        }}
                    >
                        {user_status.menu_content}
                        <DownOutlined />
                    </Space>
                </Dropdown>
            </nav>
            <Outlet />
        </div>
    )
}

export default StudentCoursePage;